<template>
  <div id="app">
    <div id="market">
      <div class="head">
        <div class="wrapper clearfix">
          <div class="clearfix" id="top">
            <h1 class="fl"><a><img src="../img/YNU.png"/></a></h1>
            <div class="fr clearfix" id="top1">
              <p class="fl">
                <a href="login" id="login">登录</a>
                <a href="register" id="reg">注册</a>
              </p>
            </div>
          </div>
          <ul class="clearfix" id="bott">
            <li>
              <a href="shop">所有店铺</a>
            </li>
            <li>
              <a href="item?shopId=2">足球球衣</a>
            </li>
            <li>
              <a href="item?shopId=4">主机游戏</a>
            </li>
            <li><a href="orderList">我的订单</a></li>
          </ul>
        </div>
      </div>
      <!-----------------banner------------------------------->
      <div class="banner">
        <a href="#"><img src="../img/AFFF1.png"/></a>
      </div>
      <!-----------------address------------------------------->
      <div class="address">
        <div class="wrapper clearfix">
          <a href="shop" >商店列表</a>
        </div>
      </div>
      <!----------------paintCon----------------------------->
      <div class="paintCon">
        <section class="wrapper">
          <div class="paintList" v-for="(item,index) in dataList" :key="index">
            <a @click="toItem(index+1)">
              <dl>
                <dt><img v-bind:src="item.url" width="310px" height="310px"></dt>
                <dd>{{item.name}}</dd>
                <dd><span>{{item.description}}</span></dd>
                <dd><span>{{item.bname}}</span></dd>
              </dl>
            </a>
          </div>
        </section>

      </div>
<!--      返回顶部-->
      <div class="gotop">
        <a href="orderList">
          <dl>
            <dt><img src="../img/gt1.png"/></dt>
            <dd>去购<br />物车</dd>
          </dl>
        </a>
        <a @click="logOut">
          <dl>
            <dt><img src="../img/logout.png"/></dt>
            <dd>退出<br />登录</dd>
          </dl>
        </a>
      </div>
      <!--footer-->
      <div class="footer">
        <div class="top">
          <div class="wrapper">
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot1.png"/></a>
              <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot2.png"/></a>
              <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot3.png"/></a>
              <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot4.png"/></a>
              <span class="fl">手机特色服务</span>
            </div>
          </div>
        </div>
        <p class="dibu">云南大学&copy;软件设计体系期末作业 软件学院软件工程专业<br />
          违法和不良信息举报电话：10086-250-110</p>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "ViewShop",
  data() {
    return {
      dataList: []
    }
  },
  created() {
    this.findAll();
  },
  methods: {
    //查询
    findAll() {
      this.$http({
        url: 'http://localhost:84/shop/getAll',
      }).then((res)=>{
        this.dataList = res.data.data;
      },(err)=>{
        if (err.response.status==403)
        {
          this.$message("未通过认证，请先登录或被授予权限");
        }
        else {
          console.log('err',err);
        }
      });
    },

    toItem(index){
      this.$router.push('/item?shopId='+index);
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },
  }
}
</script>

<style scoped>
    @import "../css/proList.css";
    @import "../css/public.css";
</style>